<template>
  <div class="selfService" id="nav-bar">
    <van-nav-bar title="电子证明申请" left-arrow @click-left="$router.go(-1)" />
    <div></div>
    <img class="bannenr" src="@/assets/images/pageList/bannenr.png" alt="" />
    <!-- 成绩单 -->
    <div
      class="monolithic"
      @click="() => $router.push(itme.nurl)"
      v-for="(itme, index) of imgList"
      :key="index"
    >
      <h2 class="h2List">{{ itme.name }}</h2>
      <img class="imgList" :src="itme.print" alt="" />
      <div class="in-between">
        <img class="iconic" :src="itme.iconic" alt="" />
        <div class="intermediate_title">
          <span class="title_name">{{ itme.name }}</span>
          <span>
            <img class="entrance" src="../../assets/images/pageList/sjx.png" />
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgList: [
        {
          name: "电子成绩单",
          print: require("@/assets/images/pageList/cjd-BG.png"),
          iconic: require("@/assets/images/pageList/cjd.png"),
          menuId: "d2ec885e-99e4-4be3-b9ea-386fdbe097bd",
          nurl: "/pageList/electronicAcademic?type=cjd",
        },
        {
          name: "电子证明",
          print: require("@/assets/images/pageList/zm-BG.png"),
          iconic: require("@/assets/images/pageList/zm.png"),
          menuId: "12020542-9203-4c25-b425-a56b87b22a02",
          nurl: "/pageList/electronicAcademic?type=zm",
        },
      ],
    };
  },
  created() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/variable.scss";
#nav-bar ::v-deep .van-nav-bar__title {
  color: #fff;
  font-size: 0.506667rem /* 19/37.5 */;
}
.selfService {
  position: relative;
  .bannenr {
    width: 100%;
    position: relative;
    top: -1.226667rem /* 46/37.5 */;
  }
}
@media(min-width:768px){
  .monolithic {
  padding: 0 0.266667rem /* 10/37.5 */;
  .h2List {
    font-size: 0.506667rem + $fontsize /* 19/37.5 */;
    font-weight: 600;
    color: #111;
    height: 0.48rem /* 18/37.5 */;
    line-height: 0.96rem /* 36/37.5 */;
    padding: 0.493333rem /* 18.5/37.5 */ 0;
  }
  .imgList {
    width: 100%;
    position: relative;
  }
  .in-between {
    text-align: center;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    transform: translate(0, -135%);
    .iconic {
      width: 1.6rem /* 60/37.5 */;
    }
    .intermediate_title {
      display: flex;
      justify-content: center;
      align-items: baseline;
      .title_name {
        font-size: .48rem /* 18/37.5 */;
        margin-right: .133333rem /* 5/37.5 */;
        color: #fff;
      }
      .entrance {
        width: .186667rem /* 7/37.5 */;
      }
    }
  }
}
}
@media (max-width:768px) {
  .monolithic {
  padding: 0 0.266667rem /* 10/37.5 */;
      height: 240px;
  .h2List {
    font-size: 0.506667rem + $fontsize /* 19/37.5 */;
    font-weight: 600;
    color: #111;
    height: 0.48rem /* 18/37.5 */;
    line-height: 0.96rem /* 36/37.5 */;
    padding: 0.493333rem /* 18.5/37.5 */ 0;
  }
  .imgList {
    width: 100%;
    position: relative;
  }
  .in-between {
    text-align: center;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    transform: translate(0, -135%);
    .iconic {
      width: 60px;
    }
    .intermediate_title {
      display: flex;
      justify-content: center;
      align-items: baseline;
      .title_name {
        font-size: 18px;
        margin-right: 5px;
        color: #fff;
      }
      .entrance {
        width: 7px;
      }
    }
  }
}
}
// .monolithic {
//   padding: 0 0.266667rem /* 10/37.5 */;
//       height: 240px;
//   .h2List {
//     font-size: 0.506667rem + $fontsize /* 19/37.5 */;
//     font-weight: 600;
//     color: #111;
//     height: 0.48rem /* 18/37.5 */;
//     line-height: 0.96rem /* 36/37.5 */;
//     padding: 0.493333rem /* 18.5/37.5 */ 0;
//   }
//   .imgList {
//     width: 100%;
//     position: relative;
//   }
//   .in-between {
//     text-align: center;
//     width: 100%;
//     position: relative;
//     top: 0;
//     left: 0;
//     transform: translate(0, -135%);
//     .iconic {
//       width: 60px;
//     }
//     .intermediate_title {
//       display: flex;
//       justify-content: center;
//       align-items: baseline;
//       .title_name {
//         font-size: 18px;
//         margin-right: 5px;
//         color: #fff;
//       }
//       .entrance {
//         width: 7px;
//       }
//     }
//   }
// }

.van-nav-bar {
  background: none;
}
.van-nav-bar__title {
  font-weight: 600;
  color: #fff;
}
.van-nav-bar .van-icon {
  color: #111;
}
.van-hairline--bottom::after {
  border-bottom-width: 0;
}
</style>
